<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="../src/mmGrid.css">
        <link rel="stylesheet" href="../src/mmPaginator.css">
        <link rel="stylesheet" href="../src/uliTreeGrid.css">
        <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
        <![endif]-->
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body style="padding: 40px;">
        <main>
            <div style="margin-bottom: 5px;">
                <button id="btnAddTree" class="button" >增加树子结点</button>
                <button id="btnAdd" class="button" >增加结点</button>
                <button id="btnInsert" class="button" >插入结点</button>
                <button id="btnAddTreeChild" class="button" >增加子结点</button>
                <button id="btnAddExpand" class="button" >増加折叠结点</button>
                <button id="btnRemoveSelected" class="button" >删除</button>
                <button id="btnUnIndent" class="button" title="减少级别">&lt;</button>
                <button id="btnIndent" class="button" title="増加级别">&gt;</button>
                <button id="btnExpand" class="button" title="展开">+</button>
                <button id="btnCollapse" class="button" title="收起">-</button>
                <button id="btnUp" class="button" title="收起">上移</button>
                <button id="btnDown" class="button" title="收起">下移</button>
            </div>
            <table id="mmg"></table>
            <div id="paginator" style="text-align: left;">

            </div>
            <div id="log" style="height:100px;overflow:auto;border:1px solid #ccc;">
            </div>
        </main>

        <script src="js/vendor/jquery-1.9.1.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="../src/mmGrid.js"></script>
        <script src="../src/mmPaginator.js"></script>
        <script src="../src/uliTreeGrid.js"></script>
        <script>
            $(document).ready(function(){
                
                var _id = 20;
                function get_id(){ _id ++; return _id}
                
                var items = [
                    {name:'需求阶段', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:1}
                    , {name:'需求分析', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:1, id:2}
                    , {name:'需求分析评审', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', _parent:1, id:3}
                    , {name:'开发阶段', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:4}
                    , {name:'概要设计', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:4, id:5}
                    , {name:'详细设计', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:4, id:6}
                    , {name:'开发', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:4, id:7}
                    , {name:'编码', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:7, id:8}
                    , {name:'单元测试', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _parent:7, id:9}
                ]

                var cols = [
                    {title:'ID_NAME', name:'id', width: 30, align: 'center',lockWidth:true},
                    {title:'名称', name:'name' ,width:100, lockDisplay: true },
                    {title:'开始时间', name:'begin_date' ,width:100 },
                    {title:'结束时间', name:'end_date' ,width:100 },
                    {title:'前置任务', name:'pre_task' ,width:100 }
                ];


                $('#mmg').mmGrid({
                    height: 300

                    , cols: cols
                    , method: 'get'
                    // 直接从array中加载数据
                    , items: items
                    // ajax方式加载数据
                    //, url: "data/gantt.json"
                    , items: items
                    , checkCol: true
                    , fitColWidth: true
//                    , paginator: $('#paginator').mmPaginator()
                    , nowrap: true
                    , fullWidthRows: false
                    , indexCol: true
                    //tree options
                    , treeColumn: 'name'  //第几列是树结点
                    , idField: 'id'  //缺省就是使用id
//                    , initialState: "expanded"
//                    , initialState: "collapsed"
                    , clickableNodeNames: true  //单击结点名称自动切换展示，折叠状态
//                    , expandable: false
                    //増加分页器
                    , plugins: [
                        $('#paginator').mmPaginator({limitList:[2,4,8]})
                    ]
                });
                
                //$('#mmg').mmGrid('collapseAll');
                
                function item_tree(){
                    var data = [
                        {name:'任务1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _isParent:true, id:get_id(),
                        _children:[
                            {name:'需求分析1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:get_id()}
                            , {name:'需求分析评审1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                        ]}
                        , {name:'任务2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', _isParent:true, id:get_id(),
                        _children:[
                         {name:'概要设计2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:get_id()}
                        , {name:'详细设计2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:get_id()}
                        , {name:'开发2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:get_id()}
                        ]}
                    ]
                    return data;
                }
                
                function make_item(){
                    var id = get_id();
                    var data = {name:'任务'+id, 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'2', id:id}
                    return data;
                }
                
                $('#btnAddTree').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('addChild', item_tree(), index, true);
                });
                
                $('#btnAdd').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('add', make_item(), index, true);
                });
                
                $('#btnInsert').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('insert', make_item(), index, true);
                });
                
                $('#btnAddExpand').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    var data = make_item();
                    data._isParent = true;
                    $('#mmg').mmGrid('addChild', data, index, false);
                });
                $('#btnAddTreeChild').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('addChild', make_item(), index, true);
                });
                $('#btnRemoveSelected').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('remove', index, true);
                });
                $('#btnIndent').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('indent', index, true);
                });
                $('#btnUnIndent').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('unindent', index, true);
                });
                $('#btnExpand').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('expand', index);
                });
                $('#btnCollapse').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('collapse', index);
                });
                $('#btnUp').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('up', index);
                });
                $('#btnDown').on('click', function(){
                    var index = $('#mmg').mmGrid('selectedItem');
                    $('#mmg').mmGrid('down', index);
                });
                
                
                
                function log_msg(e, data){
                    if(e.type == 'error')
                        $('#log').append(e.type+': '+data.name+','+e.originalEvent.message+'</br>');
                    else
                        $('#log').append(e.type+': '+data.name+'</br>');
                }
                
                //监控事件
                var events = ['delete', 'deleted', 'add', 'added', 'error',
                    'expand', 'expanded', 'collapse', 'collapsed', 'indent',
                    'indented', 'unindent', 'unindented']
                for(var i=0; i<events.length; i++){
                    $('#mmg').on(events[i], function(e, data){
                        log_msg(e, data);
                    });
                }
                
            });
        </script>
    </body>
</html>
